<template>
  <div>
      <button class="back" @click="goBack">←</button>
      <img :src="movie.pic" alt="">
      <h1 class="title">{{movie.title}}</h1>
  </div>
</template>

<script>
export default {
    data() {
        return {
            movie:{}
        }
    },
    mounted(){
        console.log(this.$route.params);
        var {id} = this.$route.params
        this.$http(`http://122.112.161.135:4000/api/movieDetail?id=${id}`).then(res=>{
            this.movie = res.data.res[0];
        })
    },
    methods:{
        goBack(){
            this.$router.back()
        }
    }
}
</script>

<style>
    .back{
        position: fixed;
        left: 20px;
        top: 20px;
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
    }
    img{
        width: 100%;
    }
    .title{
        text-align: center;
        font-size: 0.5rem;
    }
</style>